<template>
    <div class="energyConsumption">
        <div class="item" v-for="item in props.data" :key="item.name">
            <div class="count">{{ item.count }}</div>
            <div class="util">{{ item.util }}</div>
            <div class="name">{{ item.name }}</div>
            <img :src="item.img" alt="" />
            <div class="info">
                <span class="name">环比</span>
                <div class="right">
                    <span class="count-up">{{ item.ChainRatio.count }}%</span>
                    <div :class="item.ChainRatio.upOrDown ? 'up' : 'down'"></div>
                </div>
            </div>
            <div class="info">
                <span class="name">同比</span>
                <div class="right">
                    <span class="count-down">{{ item.YearBasis.count }}%</span>
                    <div :class="item.YearBasis.upOrDown ? 'up' : 'down'"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from '@/utils'

interface dataType {
    count: number
    util: string
    name: string
    img: string
    ChainRatio: {
        count: number
        upOrDown: boolean
    }
    YearBasis: {
        count: number
        upOrDown: boolean
    }
}

const props = defineProps({
    data: {
        type: Array<dataType>,
        default: () => [
            {
                count: 37294.23,
                util: '(KW·H)',
                name: '电力能耗',
                img: getAssetsFile('icon/icon_电力能耗.png'),
                ChainRatio: {
                    count: 10,
                    upOrDown: true
                },
                YearBasis: {
                    count: 5,
                    upOrDown: false
                }
            },
            {
                count: 13267.13,
                util: '(m³)',
                name: '水力能耗',
                img: getAssetsFile('icon/icon_水力能耗.png'),
                ChainRatio: {
                    count: 10,
                    upOrDown: true
                },
                YearBasis: {
                    count: 5,
                    upOrDown: false
                }
            }
        ]
    }
})
</script>

<style scoped lang="scss">
.energyConsumption {
    display: flex;
    justify-content: space-around;
    .item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 161px;
        height: 215px;
        padding: 10px 0;
        background: url('@/assets/images/基础/DataInfo_bg.png') no-repeat;
        background-size: 100% 100%;

        .count {
            font-family: SJyunhei;
            font-weight: 400;
            font-size: 24px;
            letter-spacing: 1px;
            color: #ffffff;
        }

        .util {
            opacity: 0.5;
            font-family: OPPOSans;
            font-size: 12px;
            letter-spacing: 1px;
            color: #e4ebf9;
        }
        .name {
            font-family: OPPOSans;
            font-size: 14px;
            letter-spacing: 1px;
            color: #89cbff;
            text-align: center;
        }

        img {
            width: 88px;
            height: 55px;
        }

        .info {
            width: 150px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: rgba(43, 89, 102, 0.2);
            padding: 5px 0;
            font-size: 16px;
            .name {
                color: rgba(255, 255, 255, 0.53);
            }
            .right {
                width: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .count-up {
                    color: #c8a477;
                    margin-right: 10px;
                }
                .count-down {
                    color: #57a6a7;
                    margin-right: 10px;
                }
                .up {
                    position: relative;
                    width: 3px;
                    height: 10px;
                    background: #c8a477;
                    animation: up 1s linear infinite;
                    &::before {
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translateX(-50%) rotate(45deg);
                        content: '';
                        display: block;
                        width: 10px;
                        height: 10px;
                        overflow: hidden;
                        clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
                        background: #c8a477;
                    }
                }

                .down {
                    position: relative;
                    width: 3px;
                    height: 10px;
                    background: #57a6a7;
                    animation: down 1s linear infinite;
                    &::before {
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%) rotate(-135deg);
                        content: '';
                        display: block;
                        width: 10px;
                        height: 10px;
                        overflow: hidden;
                        clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
                        background: #57a6a7;
                    }
                }
            }
        }
    }
}

@keyframes up {
    0% {
        bottom: 0;
    }
    100% {
        top: -2px;
    }
}

@keyframes down {
    0% {
        bottom: 0;
    }
    100% {
        bottom: -2px;
    }
}
</style>
